<template>
	<!-- vue3 的模板 vue2的写法 -->
	<view class="page">
		<view :style="{height:height+'px'}"></view>
		

		
		
		<view class="header">
			<text>EHD-V9 信息管理系统</text>
		<!-- 	<view class="logo">
				<image src="../../static/images/login/logo.png"/>
			</view> -->
		</view>
		
		<view class="login"> 
			<view class="title"><text>登录</text></view>
			
			<template v-if="type === 0">
				<view class="block">
					<view class="icon">
						<image src="/static/images/login/yonghu.png"/>
					</view>
					<view class="input">
						<input v-model="loginform.userId" placeholder="请输入用户名或手机号" type="text"/>
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/images/login/password.png"/>
					</view>
					<view class="input">
						<input v-model="loginform.password" placeholder="请输入密码" type="safe-password"/>
					</view>
				</view>
			</template>
			
			<template v-if="type === 1">
				<view class="block">
					<view class="icon">
						<image src="/static/images/login/yonghu.png"/>
					</view>
					<view class="input">
						<input v-model="form_tel" type="tel" maxlength="11" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/images/login/password.png"/>
					</view>
					<view class="input">
						<input v-model="form_code" placeholder="请输入验证码" type="number"/>
					</view>
					<view class="send-button" @click="sendCode()">
						<text v-if="!send_count_down">发送验证码</text>
						<text v-else>重新发送 {{send_count_down}} S</text>
					</view>
				</view>
			</template>
			
			<view class="change-type" v-if="false">
				<text v-if="type === 0" @click="changeType()">短信验证码登录</text>
				<text v-else @click="changeType()">用户名密码登录</text>
			</view>
			
			<view class="button" @click="login()"><text>登录</text></view>

			<!-- 添加微信登录按钮 -->
			<view class="wx-login-btn" @click="weixinLogin">
				<image src="/static/images/login/weixin.png" mode="aspectFit"></image>
				<text>微信登录</text>
			</view>

			<up-popup :show="isStoreShow" :round="10" mode="center" :closeOnClickOverlay="false" @close="closePopup()" @open="openPopup()">
				<view class="popup-conwarp">
						<view class="popNav">
								<view class="nav_left" @click="isStoreShow = false">
									<up-icon name="arrow-left" color="#fff" size="16"></up-icon>
								</view>
								<text>请选择门店</text>
						</view>
						
						<view class="popCon">
							<!-- storeList -->
							<view v-for="(item,index) in storeList" :key="index" class="row">
								<up-cell icon="home-fill" :title="item.name"  :value="item.id" isLink @click="selectStore(item)"></up-cell>
							</view>
						</view>
						
						<view class="btn">确认</view>
				</view>
			</up-popup>
		
			
		</view>
	</view>
</template>

<script>
import {getStatusBarHeight} from "@/utils/system.js"
export default {
	data() {
		return {
			type: 0, // 0 用户密码登录  1 验证码登录
			loginform:{
				userId:process.env.NODE_ENV !== "production" ? '9901' :'',
				password: process.env.NODE_ENV !== "production" ? '123456789' : '',
			},
			form_username: '',
			form_password: '',
			form_tel: '',
			form_code: '',
			send_count_down: 0, // 验证码重新发送等待倒计时
			height:'',
			isStoreShow:false,
			scrollTop: 0,
			storeList:[],
		}
	},
	methods: {
		changeType(){
			this.type = this.type ? 0 : 1
		},
		sendCode(){
			if(this.send_count_down === 0){
				// 验证手机号规则 调用发送验证码接口
				let countDown = 60 
				this.send_count_down = countDown
				let timer = setInterval(() => {
					countDown--
					this.send_count_down = countDown
					if(countDown === 0){
						clearInterval(timer)
					}
				}, 1000)
			}
		},
		login(){
			if(this.type === 0){
				// 用户密码登录
				// console.log(this.loginform)
				this._getApiLogin();
			}else{
				// 验证码登录
				console.log(this.form_tel, this.form_code)
			}
		},
		async _getApiLogin(){
			const res = await this.$api.login(this.loginform)
			console.log(res)
			
			if (res.code !== 200) return uni.showModal({title:"提示",content:res.message,showCancel:false})
			this.storeList = res.data.store
			// // 存起来token
			uni.setStorageSync('token',res.data.tokenValue)
		  this.isStoreShow  = true
		},
		async selectStore(row){
			console.log(row.id)
			uni.setStorageSync('userinfo',row)
			let data = {
				storeId:row.id
			}
			const res = await this.$api.loginStoreid(data)
			console.log(res)
			uni.switchTab({
				url:"/pages/index/index"
			})	
		},
		// ... existing code ...
		async weixinLogin() {
			// #ifdef MP-WEIXIN
			try {
				// 1. 获取用户信息
				const profileRes = await uni.getUserProfile({
					desc: '用于完善用户资料', // 声明获取用户个人信息后的用途
					lang: 'zh_CN'
				});
				
				// 2. 获取登录code
				const loginRes = await uni.login({
					provider: 'weixin'
				});
				
				// 这里可以打印看看获取到的信息
				console.log('用户信息:', profileRes.userInfo);
				console.log('登录凭证:', loginRes.code);
				
				// 获取到的信息包括：
				const userInfo = {
					nickName: profileRes.userInfo.nickName, // 昵称
					avatarUrl: profileRes.userInfo.avatarUrl, // 头像
					gender: profileRes.userInfo.gender, // 性别
					code: loginRes.code // 登录凭证
				};

				console.log(userInfo)
				
				// 可以将用户信息保存到本地
				uni.setStorageSync('userInfo', userInfo);
				
				// 模拟登录成功，直接跳转
				uni.switchTab({
					url: "/pages/index/index"
				});
				
			} catch (e) {
				console.error('微信登录错误:', e);
				uni.showToast({
					title: '登录失败，请稍后重试',
					icon: 'none'
				});
			}
			// #endif
		},
		closePopup(){
			this.isStoreShow  = false
		},
		openPopup(){
			this.isStoreShow  = true
		},
	},
	mounted() {
		this.height = getStatusBarHeight()
	}
}
</script>

<style lang="scss">
	.page{
		min-height: 100vh;
		background:
		// url(../../static/images/login/logo.png) no-repeat 80% 0px,  //可以在这多加一个logo
		// radial-gradient(90% 300px at left top, #C8DEFF, transparent),
		// radial-gradient(60% 300px at right top, #76ACFF, transparent);
		linear-gradient(to bottom, transparent -100px,#fff 300px),   //从上到下 透明色煎饼
		linear-gradient(to right, #76ACFF,#FFD1DE);  //从左到右从绿变粉色渐变
		.header{
			height: 30vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:50rpx;
			color: #76ACFF;
			.logo{
				height: 200rpx;
				width: 200rpx;
				margin-top: -100rpx;
				
				image{
					height: 200rpx;
					width: 200rpx;
				}
			}
		}
		
		.login{
			height: 700rpx;
			width: 680rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			background: #fff;
			margin: -100rpx auto auto auto;
			box-shadow: #ccc 0px 3px 6px;
			box-sizing: border-box;
			
			.title{
				font-size: 20px;
				line-height: 120rpx;
				color: #444;
				text-align: center;
			}
			
			.block{
				display: flex;
				align-items: center;
				height: 100rpx;
				width: 640rpx;
				border-bottom: 1px solid #ccc;
				margin: 40rpx 0;
				position: relative;
				
				.icon{
					width: 80rpx;
					height: 80rpx;
					image{
						margin: 15rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
				
				.input{
					width: calc(640rpx - 80rpx);
					input{
						height: 80rpx;
						font-size: 14px;
					}
				}
				
				.send-button{
					position: absolute;
					right: 0;
					top: 10rpx;
					height: 80rpx;
					width: 220rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 12px;
					color: #777;
					z-index: 99;
				}
			}
			
			.change-type{
				width: 640rpx;
				text-align: right;
				margin-bottom: 60rpx;
				
				text{
					padding: 5rpx;
					font-size: 14px;
					color: $brand-theme-color !important;
					
					&:active{
						color: #76ACFF;
					}
				}
			}
			
			.button{
				width: 600rpx;
				height: 80rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 16px;
				color: #fff;
				background-color:$brand-theme-color !important;
				margin: auto;
				
				&:active{
					background: #76ACFF;
				}
			}
		}
	}
	
	
	.popup-conwarp{
		width:650rpx;
		height:100%;
		border-radius:10px;
		background:
		linear-gradient(to bottom,transparent,#fff 400px),
		radial-gradient(90% 300px at left top, #76ACFF, transparent),
		radial-gradient(60% 300px at right top, #D3CBFC, transparent);
		overflow: hidden;
		box-sizing: border-box;
		.popNav{
			display: flex;
			width: 100%;
			height:90rpx;
			background-color: #76ACFF;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #fff;
			font-size: 16px;
			.nav_left{
				position: absolute;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
			}
		}
		.popCon{
			width: 100%;
			// height:calc(800rpx - 180rpx);
			height: 600rpx;
			// background-color: #3771F9;
			overflow-y: auto;
			.row{
				width: 100%;
			}
		}
		.btn{
			margin-left: 5%;
			width: 90%;
			height: 90rpx;
			display: flex;
			background-color: #76ACFF;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			border-radius: 20px;
		}
	}

	.wx-login-btn {
		margin: 40rpx auto;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #07c160;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		
		text {
			color: #fff;
			font-size: 16px;
		}
		
		&:active {
			opacity: 0.8;
		}
	}
</style>
